<template>
  <!-- 错误边界包裹 -->
  <ErrorBoundary>
    <!-- Suspense 管理异步依赖 -->
    <Suspense>
      <!-- 主内容区域 -->
      <template #default>
        <el-config-provider :locale="zhCn" :size="appStore.size">
          <transition name="fade" mode="out-in">
            <RouterView />
          </transition>
        </el-config-provider>
      </template>

      <!-- 加载状态（会覆盖HTML中的初始loading） -->
      <template #fallback>
        <!-- <div id="app-loading">
          <div class="loading-spinner"></div>
          <div class="loading-text"><span>火山后台</span></div>
        </div> -->
      </template>
    </Suspense>
  </ErrorBoundary>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted } from "vue";
import { useAppStore } from "@/stores/app";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const appStore = useAppStore();

// 异步加载关键组件
const RouterView = defineAsyncComponent({
  loader: () => import("vue-router").then((m) => m.RouterView),
  delay: 200, // 延迟显示fallback（避免闪烁）
  timeout: 5000, // 超时时间
});

const ErrorBoundary = defineAsyncComponent(
  () => import("@/components/ErrorBoundary.vue")
);

// 移除初始loading（可选）
onMounted(() => {
  document.getElementById("app-loading")?.remove();
});
</script>

<style scoped>

/* 页面切换动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
